<template>
    <view class="image-container">
      <!-- <view class="loading-icon" v-if="isLoading">加载中...</view> -->
      <u-loading-icon class="loading-icon" v-if="isLoading"></u-loading-icon>
      <image :src="imgShow(src)" lazy-load @load="onImageLoad" :mode="mode" class="image-style"></image>
    </view>
</template>

<script>
export default {
  props:{
    src:{
      tpye:String,
      default:''
    },
    mode:{
      type:String,
      default:''
    }
  },
  data() {
    return {
      // src: '', // 图片路径
      isLoading: true, // 图片是否正在加载
    };
  },
  methods: {
    onImageLoad() {
      this.isLoading = false; // 图片加载完成
    },
  },
};
</script>

<style scoped>
.image-container {
  position: relative;
  width: 100%;
  height: 100%;
}
 
.loading-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #ccc;
  display: flex;
  align-items: center;
  justify-content: center;
}
 
.image-style {
  width: 100%;
  height: 100%;
  display: block;
}
</style>
